<template>
  <div class="body">
    <el-container>
      <!-- 头部导航栏 -->
      <el-header>
        <Index></Index>
      </el-header>
      <!-- 左侧边栏 -->

      <el-container style="margin-top:40px;">
        <el-aside width="412px" class="aside">
          <iframe
            src="https://apip.weatherdt.com/h5.html?id=czJxYbsAlE"
            width="392px"
            height="1400px"
            frameborder="0"
            scrolling="no"
          >
            <a href="https://apip.weatherdt.com/h5.html?id=czJxYbsAlE"
              >你的浏览器不支持iframe页面嵌套，请点击这里访问页面内容。</a
            >
          </iframe>
        </el-aside>

        <el-container>
          <el-main>
            <div id="allmap">
              <el-row>
                <div id="weather-view-he"></div>
                <!-- <div id="he-plugin-standard"></div> -->
              </el-row>
            </div>
          </el-main>
        </el-container>
      </el-container>

      <Bottom></Bottom>
    </el-container>
  </div>
</template>
<script>
import Index from '~/components/index2'
import Bottom from '~/components/bottom'
export default {
  data() {
    return {
      // icon: require('@/assets/images/onlinecar.png'),
      formInline: {
        user: '',
        region: ''
      },
      drawer: false,
      direction: 'rtl',

      activeIndex: '1',

      activeName: 'first'
    }
  },
  components: {
    Index,
    Bottom
  },
  created() {},

  mounted() {
    // window.WIDGET = { ID: 'v3Df6jE8FZ', FID: 'Xq8f520VKz' }
    window.WIDGET = {
      ID: 'v3Df6jE8FZ'
    }
    // window.WIDGET2 = { FID: 'Xq8f520VKz' }
    ;(function(d) {
      var cs = d.createElement('link')
      cs.rel = 'stylesheet'
      cs.href = 'https://apip.weatherdt.com/view/static/js/r.js?v=1111'

      var s = d.createElement('script')
      s.src = 'https://apip.weatherdt.com/view/static/js/r.js?v=1111'

      var sn = d.getElementsByTagName('script')[0]
      sn.parentNode.insertBefore(cs, sn)
      sn.parentNode.insertBefore(s, sn)
    })(document)
    ;(function(e) {
      var cse = e.createElement('link')
      cse.rel = 'stylesheet'
      cse.href = 'https://apip.weatherdt.com/float/static/js/r.js?v=1111'
      var se = e.createElement('script')
      se.src = 'https://apip.weatherdt.com/float/static/js/r.js?v=1111'
      var sne = e.getElementsByTagName('script')[1]
      sne.parentNode.insertBefore(cse, sne)
      sne.parentNode.insertBefore(se, sne)
    })(document)
    this.laterpowercurve()
  },

  methods: {
    laterpowercurve() {
      setTimeout(() => {
        //修改默认的天气背景图片

        let can2 = document.getElementById('weather-view-he')

        //  can2.style.backgroundColor="#03282A"
        //  can2.style.backgroundImage="url(../../assets/images/天气背景.png)"
        //   can2.style.backgroundSize="100% 100%"
        can2.style.height = '800px'
      }, 1000)
    }
  }
}
</script>
<style lang="scss" scoped>
#weather-view-he {
  // width: 70%;
  // height: 800px;
  // margin-top: 500px;
  // background-color: #072d2a;
}
#allmap {
  height: 800px;
  background-color: #072d2a;
}
// #he-plugin-standard {
//   width: 70%;
//   height: 800px;
//   margin-top: 500px;
// }
.body {
  width: 100%;
  margin-top: 0px;
  background-image: url(../../assets/images/新UI12.png);
  scrollbar-3dlight-color: #4facfa;
  scrollbar-face-color: #4facfa;
  scrollbar-arrow-color: #4facfa;
  scrollbar-shadow-color: #4facfa;
  scrollbar-dark-shadow-color: #052a28;
  scrollbar-base-color: #4facfa;
  scrollbar-track-color: #4facfa;
}
.el-drawer {
  background-color: #005a5b;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.aside {
  margin-left: 20px;
  margin-top: 20px;
  height: 800px;
  border-radius: 10px;
}
.aside::-webkit-scrollbar {
  width: 8px;
  // background-color: #0e487c;
  background-color: #052a28;
  border-radius: 10px;
}
.aside::-webkit-scrollbar-thumb {
  background-color: #4facfa;
  border-radius: 10px;
}
.aside::-webkit-scrollbar-button {
  display: none;
}
</style>
